<!DOCTYPE html>
<html>
	<head>
		<title>Calc exercise</title>
		<link href="styles.css" rel="stylesheet" />
	</head>
    <body>
        <form>
            <nav>
                <ul>
                    <li>View</li>
                    <li>Edit</li>
                    <li>Help</li>
                </ul>
            </nav>
            <input type="text" id="calculator_input" value="8854455"/>
            <table id="binary-display">
                <tr>
                    <td>0000</td>
                    <td>0000</td>
                    <td>0000</td>
                    <td>0000</td>
                    <td>0000</td>
                    <td>0000</td>
                    <td>0000</td>
                    <td>0000</td>
                </tr>
                <tr>
                    <td>63</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>47</td>
                    <td></td>
                    <td></td>
                    <td>32</td>
                </tr>
                <tr>
                    <td>0000</td>
                    <td>0000</td>
                    <td>1000</td>
                    <td>0111</td>
                    <td>0001</td>
                    <td>1011</td>
                    <td>1011</td>
                    <td>0111</td>
                </tr>
        
                <tr>
                    <td>31</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>15</td>
                    <td></td>
                    <td></td>
                    <td>0</td>
                </tr>
            </table>
            <table id="main_table">
                <tbody>
                    <tr>
                        <td rowspan="3" class="buttonCalculator">
                            <div>
                                <input type="radio" name="System" id="Hex"/>
                                <label for="Hex">Hex</label>
                            </div>
                            <div>
                                <input type="radio" checked="checked" name="System" id="Dec"/>
                                <label for="Dec">Dec</label>
                            </div>
                            <div>
                                <input type="radio" name="System" id="Oct"/>
                                <label for="Oct">Oct</label>
                            </div>
                            <div>
                                <input type="radio" name="System" id="Bin"/>
                                <label for="Bin">Bin</label>
                            </div>
                        </td>
                        <td><button disabled="disabled"></button></td>
                        <td><button>Mod</button></td>
                        <td><button disabled="disabled">A</button></td>
                        <td><button disabled="disabled">MC</button></td>
                        <td><button disabled="disabled">MR</button></td>
                        <td><button disabled="disabled">MS</button></td>
                        <td><button disabled="disabled">M+</button></td>
                        <td><button disabled="disabled">M-</button></td>
                    </tr>
                    <tr>
                        <td><button>(</button></td>
                        <td><button>)</button></td>
                        <td><button disabled="disabled">B</button></td>
                        <td><button>←</button></td>
                        <td><button>CE</button></td>
                        <td><button>C</button></td>
                        <td><button>±</button></td>
                        <td><button disabled="disabled">√</button></td>
                    </tr>
                    <tr>
                        <td><button>Rol</button></td>
                        <td><button>RoR</button></td>
                        <td><button disabled="disabled">C</button></td>
                        <td><button class="number">7</button></td>
                        <td><button class="number">8</button></td>
                        <td><button class="number">9</button></td>
                        <td><button>/</button></td>
                        <td><button disabled="disabled">%</button></td>
                    </tr>
                    <tr>
                        <td rowspan="3" class="buttonCalculator">
                            <div>
                                <input type="radio" checked="checked" name="Bytes" id="Qword"/>
                                <label for="Qword">Qword</label>
                            </div>
                            <div>
                                <input type="radio" name="Bytes" id="Dword"/>
                                <label for="Dword">Dword</label>
                            </div>
                            <div>
                                <input type="radio" name="Bytes" id="Word"/>
                                <label for="Word">Word</label>
                            </div>
                            <div>
                                <input type="radio" name="Bytes" id="Byte"/>
                                <label for="Byte">Byte</label>
                            </div>
                        </td>
                        <td><button>Or</button></td>
                        <td><button>Xor</button></td>
                        <td><button disabled="disabled">D</button></td>
                        <td><button class="number">4</button></td>
                        <td><button class="number">5</button></td>
                        <td><button class="number">6</button></td>
                        <td><button>*</button></td>
                        <td><button disabled="disabled">1/x</button></td>
                    </tr>
                    <tr>
                        <td><button>Lsh</button></td>
                        <td><button>Rsh</button></td>
                        <td><button disabled="disabled">E</button></td>
                        <td><button class="number">1</button></td>
                        <td><button class="number">2</button></td>
                        <td><button class="number">3</button></td>
                        <td><button>-</button></td>
                        <td rowspan="2"><button class="tall">=</button></td>
                    </tr>
                    <tr>
                        <td><button>Not</button></td>
                        <td><button>And</button></td>
                        <td><button disabled="disabled">F</button></td>
                        <td  colspan="2"><button class="long" id="Button9">0</button></td>
                        <td><button disabled="disabled">.</button></td>
                        <td><button>+</button></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>